<template>
  <div>
    <sticky :offset="0">
      <x-header :left-options="{showBack: false}" style="background-color:#000;">报修记录</x-header>
    </sticky>

    <div class="scroll" ref="scroll">
      <scroll v-if="list.length" :bubbleTopSize="33" :loadDatas="list" :pullUpLoad="pullUpLoad" :pulldown="pulldown" @pullingUp="loadUpData" @pullingDown="loadDownData">
        <group v-for="(wo,index) in list" :key="wo.mrid" :gutter="index > 0 ? 15 : 60">
          <cell v-bind:title='wo.firstClass +"-"+wo.secondClass' :link="{ name:'workorderdetail', params: {num: wo.mrid} }"></cell>
          <cell v-bind:title='wo.mR_Remark' v-bind:inline-desc='wo.mR_CreateDate | formatDate'></cell>

          <cell-box>
            <div class="divgray">{{wo.mR_Place.replace(/※/g, " ")}}</div>
          </cell-box>

          <cell v-bind:title='wo.mR_StatusTitle'>
            <x-button mini plain>取消工单-{{wo.mrid}}</x-button>
            <a href="tel:18688888888">
              <x-button mini plain>催单</x-button>
            </a>
          </cell>

        </group>

        <group>
          <div>
            <divider>我是有底线的</divider>
          </div>
          <br>
          <br>
        </group>
      </scroll>
    </div>

    <tabs :tabtype="1"></tabs>
  </div>
</template>

<script>
  import {
    Blur,
    Divider,
    Sticky,
    CellBox,
    Group,
    Cell,
    XHeader,
    Toast,
    XButton,
    Tab,
    TabItem
  } from "vux"
  import tabs from "../../components/footer"
  import scroll from "../../base/scroll"

  import {
    util,
    cfgPageSize,
    formatDate
  } from "@/utils/"
  import {
    getworkorder
  } from "@/api/workorder"

  export default {
    data() {
      return {
        isend: false,
        list: [],
        pullsize: cfgPageSize,
        pulldown: true,
        pullUpLoad: true,
        listQuery: {
          PageIndex: 1,
          PageSize: cfgPageSize,
        },
      }
    },
    filters: {
      formatDate(time) {
        var date = new Date(time)
        return formatDate(date, "yyyy-MM-dd hh:mm")
      }
    },
    created() {
      this.getorder()
    },
    methods: {
      loadDownData() {
        console.log("下拉刷新")
        this.pulldown = false
        this.listQuery.PageIndex = 1
        this.getorder()
        this.pulldown = true
      },
      loadUpData() {
        console.log("上拉加载")
        this.listQuery.PageIndex += 1
        this.pullUpLoad = false
        this.getorder(this.listQuery.PageIndex)
      },
      getorder(init) {
        getworkorder(this.listQuery).then(response => {
          // this.treelist = response.data.data.serviceTypeListView
          // console.log(response)
          if (init) {
            let tmplist = response.data.data.listView
            if (tmplist) {
              this.list = this.list.concat(tmplist)
            } else {
              this.isend = true
            }
            this.pullUpLoad = true
          } else {
            this.list = response.data.data.listView
          }
          console.log(this.list)

        })
      },
    },
    components: {
      Blur,
      Divider,
      scroll,
      tabs,
      Sticky,
      CellBox,
      Group,
      Cell,
      XHeader,
      Toast,
      XButton,
      Tab,
      TabItem
    }
  }

</script>

<style lang="scss" scoped>
  // @import "../../common/sass/var";
  .divgray {
    font-size: 14px;
    color: gray;
  }

  .scroll {
    width: 100%;
    padding-top: 200px;
    ul {
      width: 100%;
      li {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 20px;
        padding-top: 20px;
        border-bottom: 1px solid #e5e5e5;
        .span {
          color: #e74040;
        }
      }
    }
    .top_wapper {
      width: 100%;
      height: 20px;
      padding-top: 200px;
      text-align: center;
      line-height: 50px;
      font-size: 16px;
      position: fixed;
      top: 0;
    }
  }

</style>
